前四天我們介紹了全端框架的特色，以及 CSR、SSR、SSG 三種網頁渲染方式的比較，今天開始將正式進入 Next.js 13 的介紹啦！

首先我們先來用 create-next-app 建一個 Next.js 專案：

npx create-next-app@latest

環境需求：

• Node.js 16.14 版以上
• 支援作業系統：macOS、Windows ( 包含 WSL )、Linux

接下來你會依序看到以下幾個提示 ( 問題 )：
1. What is your project named?
輸入專案名稱。須注意，名稱必須 URL friendly，意思是所有字符都必須是 ASCII subset 之一，所以只能輸入英文字母、數字、dash ( - )、底線 ( _ )，不能輸入中文、空白等等。

除此之外，因為 npm 套件的規定，英文字母只能用小寫。有興趣了解緣由可以參考這個 issue。

(O)：myapp、my-app、my_app
(X)：my app、myApp、我的專案

2. Would you like to use TypeScript? No / Yes
TypeScipt 是現在專案開發很常使用的 JavaScript superset，可以在開發 JS 專案時避免許多型別定義或轉換導致的 bug。這邊就不花時間介紹，假如還不認識 TypeScript 的讀者可以直接 Google 關鍵字搜尋！

希望專案支援 TypeScript 就選 Yes，反之則選 No。假如選 Yes，Next.js 就會自動幫你安裝所需的 packages 以及設定檔。後續文章的 sample code 都會使用 TypeScript，假如想複製 sample code 自己跑跑看的讀者可以選 Yes。

3. Would you like to use ESLint? No / Yes
ESLint 是很常見的 linter，能讓開發團隊自訂 coding 規則，統一 coding style。

這部分大家可以自行斟酌，假如習慣使用 ESLint 就選 Yes；假如想使用其他 linter，像是近年呼聲很高的 Rome，則可以選 No 再自己安裝其他 linter。

4. Would you like to use Tailwind CSS? No / Yes
Tailwind CSS 是個近年來很熱門的 CSS 框架，這部分就看個人 styling 工具使用習慣選擇。假如選 Yes，Next.js 會幫你安裝好需要的 packages 與設定檔，以及做好前置設定，基本上專案安裝好就可以直接使用。後續 sample code 會使用 Tailwind CSS，所以一樣，假如想跑跑看 sample code 可以選 Yes！

這邊有個小提醒，後續會提到 Next.js 13 更新內容中一大重點 - Server Components。Server Components 目前並不支援 CSS-in-JS，所以假如習慣使用像是 Styled-Components 的讀者，在選擇 styling 工具時可將這點納入考量。

5. Would you like to use "src/" directory? No / Yes
假如希望 /components、/lib、/utils 等資料夾不要放在根目錄，可以與設定檔 ( ex: package.json、next.config.js ) 隔開，可以選 Yes，在負責 routing 的 /app 或 /pages 外加一層 src 資料夾。

當然上述提到的資料夾也可以放在 /app 中，明天會再跟大家介紹 App Router 的檔案結構，這題可依個人習慣選擇！

但要小心，假如專案中同時有 /app 或 /pages 與 /src/app 或 /src/pages，src 裡的 /app 和 /pages 會自動被略過。

6. Would you like to use App Router? (recommended) No / Yes
App Router 是 Next.js 13 推出的新的路由架構，提供了一系列能提升網頁效能和開發體驗的新功能，之後會再詳細介紹！

這個系列分享的內容是基於 App Router 的架構，所以這邊就選 Yes！但假如個人專案要使用舊有的 Pages Router 模式，則可選 No。

7. Would you like to customize the default import alias? No / Yes
為了使 import 路徑能更直覺，Next.js 提供 “baseURL” 的設定讓開發者可以用絕對路徑的概念來 import modules。

直接來看官方提供的例子會更好理解：

// before
import { Button } from '../../../components/button'
 
// after
import { Button } from '@/components/button'

預設的 alias 是 @，如上面官方的範例；假如想自訂 alias，比方說 @root，這邊就選 Yes，並在下一題 What import alias would you like configured? 輸入 @root/*。

以相同的官方範例來說，Button 的 import 路徑就會改成：

// before
import { Button } from '@/components/button'

// after
import { Button } from '@root/components/button';

預設的 baseURL 是指向專案根目錄，等下會再教大家怎麼改 baseURL 的路徑和自訂不同的匯入路徑！後續 sample code 的 alias 會使用預設的 @，所以這題選 No。

這些都填完了之後按下 Enter，Next.js 就會根據你的回答，安裝好需要的 dependencies 和建置專案結構。

當然你也可以選擇不使用 create-next-app，手動安裝 Next.js。因為時間關係，就不再多做介紹，有需求的讀者可以參考官方文件。

最後我們來回答剛剛的問題：假如想修改 baseURL 和自訂匯入路徑，我們首先打開根目錄中的 tsconfig.json。在 compilerOptions 中找到 paths：

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  ...
}

假如沒有自訂 import alias，你會看到 @/* 指向 ./src/* 這個路徑。所以假如想將 baseURL 改到 /src/components，就改一下 @/* 的 value：

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/components/*"]
    }
  },
  ...
}

這時同樣以上述官方範例為例，Button 的匯入路徑就會改為：

// before
import { Button } from '@/components/button'

// after
import { Button } from '@/button';

假如想自訂匯入路徑，就在這邊加一個 key-value pair。比方說我新增一個路徑 components/ 可以對應到 ./src/components/：

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/components/*"],
      "components/*": ["./src/components/*"]
    }
  },
  ...
}

官方範例的 Button 匯入路徑就可以改為：

// before
import { Button } from '@/components/button'

// after
import { Button } from '/components/button';

有興趣的讀者可以自己玩玩看！

今天就到這邊，明天會和大家介紹 App Router 的檔案結構，和 create-next-app 預設建立的檔案們的用途！

謝謝大家耐心的閱讀，我們明天見！